<script setup>
  import Header from './Header.vue';
  import { ref, reactive } from 'vue';
  import instance from '../js/axios'
  import {useRouter} from 'vue-router'
  import { defineUser } from '../store/logUserStore';

  const router = useRouter()
  let loginUser = reactive({
    username:'',
    userpwd:''
  })
  let usernameMsg = ref('')
  let userPwdMsg = ref('')
  let sysUser = defineUser()

  /**
   * 校验用户名格式
   */
  function checkUsername(){
    let usernameReg = /^[a-zA-Z0-9]{5,10}$/
    if(!usernameReg.test(loginUser.username)){
      usernameMsg.value = '格式有误！'
      return false
    }
    usernameMsg.value = 'OK!'
    return true
  }

  /**
   * 校验密码格式
   */
  function checkUserPwd() {
    let userPwdReg = /^[0-9]{6}$/
    if(!userPwdReg.test(loginUser.userpwd)){
      userPwdMsg.value = '格式有误！'
      return false
    }
    userPwdMsg.value = 'OK!'
    return true
  }

  /**
   * 登录函数
   */
  async function login() {
    // 校验表单数据
    let flag1 = checkUsername()
    let flag2 = checkUserPwd()
    if(!(flag1 && flag2)) {
      alert('表单格式有误！')
      return
    }

    let {data} = await instance.get("/user/login", {params:{"username":loginUser.username, "userpwd": loginUser.userpwd}})
    console.log(data)
    if(data.code === '1000'){
      // 登录的用户信息存到defineUser中
      sysUser.uid = data.data.uid
      sysUser.username = data.data.userName
      router.push(`/showSchedule`)
    }else{
      alert(data.message)
    }

  }

  function reset() {
    loginUser.username = ""
    loginUser.userpwd = ""
    usernameMsg.value = ""
    userPwdMsg.value = ""
  }
</script>

<template>
 <div>
  <h3 class="ht">请登录</h3>
  <Header></Header>
  <hr>
    <table class="tab" cellspacing="0px">
      <tr class="ltr">
        <td>请输入账号</td>
        <td>
          <input class="ipt"
          type="text"
          v-model="loginUser.username"
          @blur="checkUsername()">
          <span id="usernameMsg" v-text="usernameMsg"></span>
        </td>
      </tr>
      <tr class="ltr">
        <td>请输入密码</td>
        <td>
          <input class="ipt"
          type="password"
          v-model="loginUser.userpwd"
          @blur="checkUserPwd()">
          <span id="userPwdMsg" v-text="userPwdMsg"></span>
        </td>
      </tr>
      <tr class="ltr">
        <td colspan="2" class="buttonContainer">
          <input class="btn1" type="button" @click="login()" value="登录">
          <input class="btn1" type="button" @click="reset()" value="重置">
          <router-link to="/register">
           <button class="btn1">去注册</button>
          </router-link>
        </td>
      </tr>
    </table>
 </div>
</template>
<style scoped>
    .ht{
      text-align: center;
      color: cadetblue;
      font-family: 幼圆;
    }
    .tab{
      width: 500px;
      border: 5px solid cadetblue;
      margin: 0px auto;
      border-radius: 5px;
      font-family: 幼圆;
    }
    .ltr td{
      border: 1px solid powderblue;
    }
    .ipt{
      border: 0px;
      width: 50%;
    }
 .btn1{
      border: 2px solid powderblue;
      border-radius: 4px;
      width:60px;
      background-color: antiSuewhite;
    }
    #usernameMsg , #userPwdMsg {
      color: gold;
    }
    .buttonContainer{
      text-align: center;
    }
</style>
